<template>
    <Header title='JD商城 ~ 订单页'>
        <template #left>
            <van-icon name="arrow-left" @click="tobackFn" />
        </template>
    </Header>

     <van-form @submit="submitHandler">
      <van-cell-group inset>
        <van-field
          v-model="username"
          name="姓名"
       label="姓名"
          placeholder="姓名"
        />
        <van-field
          v-model="phone"
          name="手机号"
          label="手机号"
          placeholder="手机号"
        />
      </van-cell-group>
      <van-fiel
        v-model="city"
        is-link
        readonly
        name="picker"
        placeholder="点击选择城市"
        @click="showPicker = true"
      />
      <van-popup v-model:show="showPicker" position="bottom">

        <van-area
          title="标题"
          @confirm="onConfirm"
          @cancel="showPicker = false"
          :area-list="areaList" />
      </van-popup> 
      <van-cell-group inset>
        <van-field
          v-model="address"
          name="详细地址"
          label="详细地址"
          placeholder="详细地址"
          :rules="[{ required: true, message: '请填写详细地址' }]"
        />
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>


    <!-- 展示订单信息 -->
    <SdyOrderInfo v-if="showInfo" @finish="orderFinishHandler" :info="info" />
    <SdyOrderList v-if="showList" />
</template>

<script setup lang="ts">
import { areaList } from '@vant/area-data'
import vant from 'vant'
import router from '@/router'
import { userOrderlistApi } from '@/api/order'
import { ref, onMounted } from 'vue'


const username = ref<string>('')
const phone = ref<string>('')
const address = ref<string>('')
const showPicker = ref<boolean>(false)
const city = ref<string>('')
const user_id = window.localStorage.getItem('user_id')
// //返回上一级
const tobackFn = () => {
    router.go(-1)
}
const Orderlist = async (user_id: string, time: string) => {
    const res = await userOrderlistApi(user_id, time)
    console.log(12, res);
}

onMounted(() => {
    // Orderlist()
})

//地区选择
const result = ref('');
const showArea = ref(false);
const onConfirm = (areaValues) => {
    showArea.value = false;
    result.value = areaValues
        .filter((item) => !!item)
        .map((item) => item.name)
        .join('/');
}


// //表单提交事件
const submitHandler = () => {
    console.log('提交');

}
</script>
<style scoped lang="scss">

</style>